<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<link href="css/index.css" rel="stylesheet" type="text/css" />
		<link href="js/fancybox/jquery.fancybox-1.3.4.css" rel="stylesheet" type="text/css" />
		<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
		<script type="text/javascript" src="js/fancybox/jquery.fancybox-1.3.4.pack.js"></script>
		<script type="text/javascript" src="js/index.js"></script>
		<title>NJU Movie Recommender</title>
	</head>
	<body>
		<div id="main_container">
			<div id="header">
				<a href="index.html" class="site_name">
				<h2>NJU Movie Recommender</h2>
				</a>
				<ul class="menu">
					<li class="register">
						<a class="fancybox" href="#register_box">Sign Up</a>
					</li>
					<li class="login">
						<a class="fancybox" href="#login_box">Login</a>
					</li>
				</ul>
			</div>
			<div id="body">
				<div id="leftcolumn">
					<div class="title_box">
						Genres
					</div>
					<ul class="genre_menu">
						<li class="odd">
							<a href="#">Action</a>
						</li>
						<li class="even">
							<a href="#">Adventure</a>
						</li>
						<li class="odd">
							<a href="#">Animation</a>
						</li>
						<li class="even">
							<a href="#">Children's</a>
						</li>
						<li class="odd">
							<a href="#">Comedy</a>
						</li>
						<li class="even">
							<a href="#">Crime</a>
						</li>
						<li class="odd">
							<a href="#">Documentary</a>
						</li>
						<li class="even">
							<a href="#">Drama</a>
						</li>
						<li class="odd">
							<a href="#">Fantasy</a>
						</li>
						<li class="even">
							<a href="#">Film-Noir</a>
						</li>
						<li class="odd">
							<a href="#">Horror</a>
						</li>
						<li class="even">
							<a href="#">Musical</a>
						</li>
						<li class="odd">
							<a href="#">Mystery</a>
						</li>
						<li class="even">
							<a href="#">Romance</a>
						</li>
						<li class="odd">
							<a href="#">Sci-Fi</a>
						</li>
						<li class="even">
							<a href="#">Thriller</a>
						</li>
						<li class="odd">
							<a href="#">War</a>
						</li>
						<li class="even">
							<a href="#">Western</a>
						</li>
					</ul>
				</div><!--end of left content -->
				
				<div id="centercolumn">
					<div class="title_bar">
						Recommended Movies
					</div>
					<div class="recommended_movie_area">
						<div class="movie_box">
							<div class="movie_title">
								<a href="#">Toy Story</a>
							</div>
							<div class="movie_img">
								<a href="#">
								<img src="images/toy_story.jpg" alt="Toy Story"/>
								</a>
							</div>
							<div class="movie_summary">
								<a href="#">This is a story about...</a>
							</div>
						</div>
						<div class="movie_box">
							<div class="movie_title">
								<a href="#">Toy Story</a>
							</div>
							<div class="movie_img">
								<a href="#">
								<img src="images/toy_story.jpg" alt="Toy Story"/>
								</a>
							</div>
							<div class="movie_summary">
								<a href="#">This is a story about...</a>
							</div>
						</div>
						<div class="movie_box">
							<div class="movie_title">
								<a href="#">Toy Story</a>
							</div>
							<div class="movie_img">
								<a href="#">
								<img src="images/toy_story.jpg" alt="Toy Story"/>
								</a>
							</div>
							<div class="movie_summary">
								<a href="#">This is a story about...</a>
							</div>
						</div>
						<div class="movie_box">
							<div class="movie_title">
								<a href="#">Toy Story</a>
							</div>
							<div class="movie_img">
								<a href="#">
								<img src="images/toy_story.jpg" alt="Toy Story"/>
								</a>
							</div>
							<div class="movie_summary">
								<a href="#">This is a story about...</a>
							</div>
						</div>
						<div class="movie_box">
							<div class="movie_title">
								<a href="#">Toy Story</a>
							</div>
							<div class="movie_img">
								<a href="#">
								<img src="images/toy_story.jpg" alt="Toy Story"/>
								</a>
							</div>
							<div class="movie_summary">
								<a href="#">This is a story about...</a>
							</div>
						</div>
						<div class="movie_box">
							<div class="movie_title">
								<a href="#">Toy Story</a>
							</div>
							<div class="movie_img">
								<a href="#">
								<img src="images/toy_story.jpg" alt="Toy Story"/>
								</a>
							</div>
							<div class="movie_summary">
								<a href="#">This is a story about...</a>
							</div>
						</div>
						<div class="movie_box">
							<div class="movie_title">
								<a href="#">Toy Story</a>
							</div>
							<div class="movie_img">
								<a href="#">
								<img src="images/toy_story.jpg" alt="Toy Story"/>
								</a>
							</div>
							<div class="movie_summary">
								<a href="#">This is a story about...</a>
							</div>
						</div>
						<div class="movie_box">
							<div class="movie_title">
								<a href="#">Toy Story</a>
							</div>
							<div class="movie_img">
								<a href="#">
								<img src="images/toy_story.jpg" alt="Toy Story"/>
								</a>
							</div>
							<div class="movie_summary">
								<a href="#">This is a story about...</a>
							</div>
						</div>
						<div class="movie_box">
							<div class="movie_title">
								<a href="#">Toy Story</a>
							</div>
							<div class="movie_img">
								<a href="#">
								<img src="images/toy_story.jpg" alt="Toy Story"/>
								</a>
							</div>
							<div class="movie_summary">
								<a href="#">This is a story about...</a>
							</div>
						</div>
					</div>
				</div> <!--end of center content -->
				
				<div id="rightcolumn">
					<div class="title_bar">
						Hot Movies
					</div>
					<ul class="hotmovie_list">
						<li class="hotmovie_box">
							<div class="hotmovie_label">
								1
							</div>
							<div class="hotmovie_image">
								<a href="#">
								<img src="images/toy_story.jpg" alt="Toy Store"/>
								</a>
							</div>
						</li>
						<li class="hotmovie_box">
							<div class="hotmovie_label">
								2
							</div>
							<div class="hotmovie_image">
								<a href="#">
								<img src="images/toy_story.jpg" alt="Toy Store"/>
								</a>
							</div>							
						</li>
						<li class="hotmovie_box">
							<div class="hotmovie_label">
								3
							</div>
							<div class="hotmovie_image">
								<a href="#">
								<img src="images/toy_story.jpg" alt="Toy Store"/>
								</a>
							</div>							
						</li>
						<li class="hotmovie_box">
							<div class="hotmovie_label">
								4
							</div>
							<div class="hotmovie_image">
								<a href="#">
								<img src="images/toy_story.jpg" alt="Toy Store"/>
								</a>
							</div>							
						</li>
					</ul>
				</div>  <!--end of right content -->
				
			</div>  <!--end of body -->
			
			<div class="footer">
				Copyright &copy; 2011 by NJU.
				<br/>
				All Right Reserved.
				<br/>
				<a class="contact_us" href="#">Contact us</a>
			</div>
		</div>
		
		<!--Register & Login FancyBox-->
		<div id="login_box_wrapper">
			<div id="login_box">
				<div class="login_box_header">
					<h3>Login</h3>
				</div>
				<form class="login_form" method="post" action="">
					<p class="login_form_email">
						<input type="email" name="email" id="email">
					</p>
					<p class="login_form_password">
						<input type="password" name="password" id="password">
					</p>
					<label class="login_form_remember">
						<input type="checkbox" name="remember" value="1" id="checkbox">
						Remember me
					</label>
					<input type="submit" value="login" class="login_form_submit">
				</form>
			</div>
		</div>
		<div id="login_box_wrapper">
			<div id="register_box">
				<div class="login_box_header">
					<h3>Login</h3>
				</div>
				<form class="login_form" method="post" action="">
					<p class="login_form_email">
						<input type="email" name="email" id="email">
					</p>
					<p class="login_form_password">
						<input type="password" name="password" id="password">
					</p>
					<label class="login_form_remember">
						<input type="checkbox" name="remember" value="1" id="checkbox">
						Remember me
					</label>
					<input type="submit" value="login" class="login_form_submit">
				</form>
			</div>
		</div>
	</body>
</html>


